<template>
  <div class="my-article">
    <!-- 导航栏 -->
    <van-nav-bar
      @click-left="$router.back()"
      fixed
      placeholder
      left-arrow
      title="文章详情"
    />
    <!-- 标题 -->
    <h2 class="title">{{ info.title }}</h2>
    <!-- 作者资料 -->
    <div class="info-box">
      <!-- 头像 -->
      <van-image :src="info.aut_photo" fit="cover" round />
      <!-- 名字信息 -->
      <div class="name-box">
        <div class="name">{{ info.aut_name }}</div>
        <div class="time">{{ info.pubdate | formatTime }}</div>
      </div>
      <!-- 关注 -->
      <van-button @click="cancel" v-if="info.is_followed" size="small" round>取关</van-button>
      <van-button @click="follow" v-else type="info" size="small" round>+ 关注</van-button>

    </div>
    <!-- 文章内容 -->
    <div class="content" v-html="info.content"></div>

    <van-divider>评论列表</van-divider>

    <my-comment />
  </div>
</template>

<script>
import { detailAPI } from '@/api/news'
import { followAPI, cancelFollowAPI } from '@/api/user'
import MyComment from './MyComment.vue'
export default {
  name: 'MyArticle',
  components: {
    MyComment
  },
  data () {
    return {
      info: {}
    }
  },
  methods: {
    async cancel () {
      await cancelFollowAPI(this.info.aut_id)
      this.info.is_followed = false
      this.$toast.fail('取消关注')
    },
    async follow () {
      // 发请求改服务器
      await followAPI(this.info.aut_id)
      // 关注了，把本地的数据也改了
      this.info.is_followed = true
      this.$toast.success('关注成功')
    }
  },
  async created () {
    // 发请求获取文章详情
    const res = await detailAPI(this.$route.params.id)
    this.info = res.data
  }
}
</script>

<style lang="less" scoped>
.my-article {
  padding: 0 20px;
  .title {
    font-size: 20px;
    margin: 20px 0;
  }
  .info-box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .van-image {
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }
    .name-box {
      flex: 1;
      .time {
        color: gray;
        font-size: 12px;
        margin-top: 10px;
      }
    }
  }

  .content {
    margin-bottom: 20px;
    ::v-deep {
      pre {
        overflow: auto;
        background-color: #000;
        color: #ddd;
      }

      img {
        width: 100%;
      }

      table {
        width: auto !important;
      }

      td {
        display: inline-block;
        width: 100px;
        overflow: auto;
      }
    }
  }
}
</style>
